<template>
	<div class="wrapper">
	  <!-- header部分 -->
	  <header>
		<button class="back-arrow" @click="goBack"></button>
		<p>确认订单</p>
	  </header>
	  <!-- 订单信息部分 -->
	  <div class="order-info">
		<h5>订单配送至：</h5>
		<div class="order-info-address" @click="toUserAddress">
		  <p>{{ deliveryaddress ? deliveryaddress.address : '请选择送货地址' }}</p>
		  <i class="fa fa-angle-right"></i>
		</div>
		<p>{{ deliveryaddress?deliveryaddress.contactName:''}}{{ (deliveryaddress ? deliveryaddress.contactSex :'')| sexFilter  }} {{ deliveryaddress?deliveryaddress.contactTel:'' }}</p>
	  </div>
	  <h3>{{ business.businessName }}</h3>
	  <!-- 订单明细部分 -->
	  <ul class="order-detailed">
		<li v-for="item in cartArr" :key="item.food.id">
		  <div class="order-detailed-left">
			<img :src="item.food.foodImg">
			<p>{{ item.food.foodName }} x {{ item.quantity }}</p>
		  </div>
		  <p>&#165;{{ (item.food.foodPrice * item.quantity).toFixed(2) }}</p>
		</li>
	  </ul>
	  <div class="order-deliveryfee">
		<p>配送费</p>
		<p>&#165;{{ business.deliveryPrice }}</p>
	  </div>
	  <!-- 合计部分 -->
	  <div class="total">
		<div class="total-left">
		  &#165;{{ totalPrice }}
		</div>
		<div class="total-right" @click="toPayment">
		  去支付
		</div>
	  </div>
	  <!-- Alert Modal -->
	  <alert-modal v-if="alertVisible" :visible.sync="alertVisible" :message="alertMessage"></alert-modal>
	</div>
  </template>
  
  <script>

  import request from '../request.js';
  export default {
	name: 'Orders',
	data() {
	  return {
		businessId: this.$route.query.businessId,
		business: {},
		user: {},
		cartArr: [],
		deliveryaddress: {},
		alertVisible: false,
		alertMessage: ''
	  };
	},
	created() {
	  this.user = this.$getSessionStorage('user');
	  this.deliveryaddress = this.$getLocalStorage(this.user.userId);
    
	  // 查询当前商家
	  request.get(`businesses/${this.businessId}`).then(response => {
		this.business = response.data;
	  }).catch(error => {
		console.error(error);
	  });
  
	  // 查询当前用户在购物车中的当前商家食品列表
	  request.get('carts/', {
        params: {
        	userId: this.user.userId,
    		businessId: this.businessId
		}
      }).then(response => {
		this.cartArr = response.data;
	  }).catch(error => {
		console.error(error);
	  });
	},
	computed: {
		totalPrice() {
            let  totalPrice = 0;
            for (let cartItem of this.cartArr) {
                  totalPrice += cartItem.food.foodPrice * cartItem.quantity;
                 }
                   totalPrice += this.business.deliveryPrice;
                   return totalPrice.toFixed(2);			  }
	},
	filters: {
	  sexFilter(value) {
		if (value === '') return '';
		else return value === 1 ? '先生' : '女士';
	  }
	},
	methods: {
	  goBack() {
				console.log('Trying to go back...');
                this.$router.go(-1); // 相当于浏览器的后退操作
                },
	  toUserAddress() {
		this.$router.push({
		  path: '/userAddress',
		  query: {
			businessId: this.businessId
		  }
		});
	  },
	  toPayment() {
		if (this.deliveryaddress == null) {
		  this.alertMessage = '请选择送货地址！';
		  this.alertVisible = true;
		  return;
		}
		// 创建订单
		this.alertVisible = false;
		request.post('orders/', this.$qs.stringify({
					userId: this.user.userId,
					businessId: this.businessId,
					daId: this.deliveryaddress.daId,
					orderTotal: this.totalPrice
				})).then(response => {
		  let orderId = response.data;
		  if (orderId > 0) {
			this.$router.push({
			  path: '/payment',
			  query: {
				orderId: orderId
			  }
			});
		  } else {
			this.alertMessage = '创建订单失败！';
			this.alertVisible = true;
		  }
		}).catch(error => {
		  console.error(error);
		});
	  },
	}
  };
  </script>
  
  <style scoped>
  /****************** 总容器 ******************/
  .wrapper {
	  width: 100%;
	  height: 100%;
  }
/****************** 返回键 ******************/

.back-arrow {
  position: fixed; /* 固定定位 */
  left: 2.5vw; /* 距离屏幕左端像素 */
  top: 2.5vw; /* 距离屏幕顶部像素 */
  width: 8vw; /* 使用视口宽度的百分比 */
  height: 8vw; /* 使用视口宽度的百分比，保持宽高比 */
  background-color: rgba(0, 151, 255, 0.5); /* 半透明的背景颜色 */
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  border: none; /* 隐藏边框 */
  transition: background-color 0.3s ease; /* 背景颜色变化动画 */
}

.back-arrow::before {
  content: '\f053'; /* 使用 FontAwesome 的左箭头图标 */
  font-family: 'FontAwesome'; /* FontAwesome 字体 */
  font-size: 5vh; /* 使用视口高度的百分比，确保在不同设备上也合适 */
  color: #fff; /* 字体颜色 */
  transition: color 0.3s ease; /* 字体颜色变化动画 */
}

.back-arrow:hover::before {
  color: #0a2ddc; /* 鼠标悬停时的颜色变化 */
}

.back-arrow:hover {
  background-color: rgba(0, 151, 255, 0.3); /* 鼠标悬停时的背景颜色变化为更透明 */
}
  /****************** header部分 ******************/
  .wrapper header {
	  width: 100%;
	  height: 12vw;
	  background-color: #0097FF;
	  color: #fff;
	  font-size: 4.8vw;
	  position: fixed;
	  left: 0;
	  top: 0;
	  z-index: 1000;
	  display: flex;
	  justify-content: center;
	  align-items: center;
  }

  /****************** 订单信息部分 ******************/
  .wrapper .order-info {
	  /*注意这里，不设置高，靠内容撑开。因为地址有可能折行*/
	  width: 100%;
	  margin-top: 12vw;
	  background-color: #0097EF;
	  box-sizing: border-box;
	  padding: 2vw;
	  color: #fff;
  }

  .wrapper .order-info h5 {
	  font-size: 3vw;
	  font-weight: 300;
  }

  .wrapper .order-info .order-info-address {
	  width: 100%;
	  display: flex;
	  justify-content: space-between;
	  align-items: center;
	  font-weight: 700;
	  user-select: none;
	  cursor: pointer;
	  margin: 1vw 0;
  }

  .wrapper .order-info .order-info-address p {
	  width: 90%;
	  font-size: 5vw;
  }

  .wrapper .order-info .order-info-address i {
	  font-size: 6vw;
  }

  .wrapper .order-info p {
	  font-size: 3vw;
  }

  .wrapper h3 {
	  box-sizing: border-box;
	  padding: 3vw;
	  font-size: 4vw;
	  color: #666;
	  border-bottom: solid 1px #DDD;
  }

  /****************** 订单明细部分 ******************/
  .wrapper .order-detailed {
	  width: 100%;
  }

  .wrapper .order-detailed li {
	  width: 100%;
	  height: 16vw;
	  box-sizing: border-box;
	  padding: 3vw;
	  color: #666;
	  display: flex;
	  justify-content: space-between;
	  align-items: center;
  }

  .wrapper .order-detailed li .order-detailed-left {
	  display: flex;
	  align-items: center;
  }

  .wrapper .order-detailed li .order-detailed-left img {
	  width: 10vw;
	  height: 10vw;
  }

  .wrapper .order-detailed li .order-detailed-left p {
	  font-size: 3.5vw;
	  margin-left: 3vw;
  }

  .wrapper .order-detailed li p {
	  font-size: 3.5vw;
  }

  .wrapper .order-deliveryfee {
	  width: 100%;
	  height: 16vw;
	  box-sizing: border-box;
	  padding: 3vw;
	  color: #666;
	  display: flex;
	  justify-content: space-between;
	  align-items: center;
	  font-size: 3.5vw;
  }

  /****************** 订单合计部分 ******************/
  .wrapper .total {
	  width: 100%;
	  height: 14vw;
	  position: fixed;
	  left: 0;
	  bottom: 0;
	  display: flex;
  }

  .wrapper .total .total-left {
	  flex: 2;
	  background-color: #505051;
	  color: #fff;
	  font-size: 4.5vw;
	  font-weight: 700;
	  user-select: none;
	  display: flex;
	  justify-content: center;
	  align-items: center;
  }

  .wrapper .total .total-right {
	  flex: 1;
	  background-color: #38CA73;
	  color: #fff;
	  font-size: 4.5vw;
	  font-weight: 700;
	  user-select: none;
	  cursor: pointer;
	  display: flex;
	  justify-content: center;
	  align-items: center;
  }
</style>